<!DOCTYPE >
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>专家专业管理</title>

		<!-- Bootstrap -->
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

		<style>

			.ctl-container{
				margin-top: 20px;
				margin-bottom: 20px;
			}
			
			.form-group {
				margin-right: 20px;
			}
			
			.topbar {
				text-align: right;
				margin-top: 30px;
			}
			
			td:nth-child(1),th:nth-child(1){
				display: none;
			}
		</style>
	</head>
	<body>

		<div class="container">
			<div class="topbar">
				<a class="btn btn-info " href="/">抽选首页</a>
				
				<!-- Single button -->
				<div class="btn-group">
					<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
					 aria-expanded="false">
						管理 <span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li><a href="/experts">专家信息</a></li>
						<li><a href="/types">专家属性</a></li>
						<li><a href="/majors">专业类别</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="/logout" class="logout">注销</a></li>
					</ul>
				</div>
			</div>
			<div class="ctl-container">
				<h2>专家专业</h2>
				<button class="btn btn-primary btn-lg btn-add" data-toggle="modal" data-target=".modal-edit">新增</button>
				<button class="btn btn-primary btn-lg btn-edit-top hidden" data-toggle="modal" data-target=".modal-edit">编辑</button>
				<button class="btn btn-primary btn-lg btn-delete-top hidden" data-toggle="modal" data-target=".modal-delete">删除</button>
			</div>
			<div class="tbl-container">
				<table class="table table-striped table-bordered table-hover" id="tbl">

				</table>
			</div>



			<div class="modal fade modal-edit" tabindex="-1" role="dialog" aria-labelledby="专家专业">
				<div class="modal-dialog modal-lg" role="document">
					<div class="modal-content">

						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
							<h4 class="modal-title">专家专业</h4>
						</div>
						<div class="modal-body">
							<form class="ctl-container form-inline form-pop" name="form1">
								<div class="alert alert-danger" role="alert">已注册相同的专家专业！</div>
								<div class="form-group" style="width: 80%;">
									<input type="text" name="name" class="form-control" style="width: 100%;" required="required" />
								</div>
								<div class="form-group">
									<input type="submit" class="btn btn-primary btn-save" value="Save" />
									<button type="button" class="btn btn-default btn-close" data-dismiss="modal">Close</button>
								</div>

							</form>
						</div>
					</div><!-- /.modal-content -->
				</div>
			</div>

			<div class="modal fade modal-delete" tabindex="-1" role="dialog" aria-labelledby="删除">
				<div class="modal-dialog modal-lg" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
							<h4 class="modal-title">删除</h4>
						</div>
						<div class="modal-body">
							确定要删除该条记录吗？
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary btn-delete-ok" data-dismiss="modal">OK</button>
							<button type="button" class="btn btn-default btn-delete-cancel" data-dismiss="modal">Cancel</button>
						</div>
					</div>
				</div>
			</div>

		</div>

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="http://all4u.gitee.io/bootstrap-paginator/src/bootstrap-paginator.js" type="text/javascript" charset="utf-8"></script>


		<script>
			$(function() {

				var list;
				var current = -1;

				loadAll();


				function loadAll() {

					$.ajax({
						type: "get",
						url: "/api/expertmajors",
						dataType: "json",
						success: function(data) {

							list = data.content;
							localStorage.setItem('expertMajors', JSON.stringify(list));

							var body =
								`<table class="table table-striped table-bordered table-hover" id="tbl">
							 <tr><th>ID</th><th>专家专业</th><th>操作</th></tr>
							 ${
							 	list.map(function(p) {
							 		return `<tr>
							 			<td>${p.id}</td>
							 			<td>${p.name}</td>
										<td>
											<button type="button" class="btn btn-default btn-edit" data-id=${p.id}  aria-label="Left Align" data-toggle="tooltip" data-placement="top" title="编辑">
											  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
											</button>
											<button type="button" class="btn btn-default btn-delete" data-id=${p.id} aria-label="Left Align" data-toggle="tooltip" data-placement="top" title="删除">
											  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
											</button>
										</td>
							 		</tr>`								
							 	}).join("")
							 }						
							 </table>`;

							$("#tbl").html(body);

							$('[data-toggle="tooltip"]').tooltip()

							$(".btn-edit").click(function() {
								current = this.dataset.id;
								document.form1.name.value = getDataById(current).name
								$(".alert").hide()
								$(".btn-edit-top").click();
							})

							$(".btn-delete").click(function() {
								current = this.dataset.id;
								$(".btn-delete-top").click();
							})
						}
					})

				}

				function getDataById(id) {
					for (var i = 0; i < list.length; i++) {
						if (list[i].id == id) {
							return list[i];
						}
					}
				}

				function getDataByName(name) {
					for (var i = 0; i < list.length; i++) {
						if (list[i].name == name) {
							return list[i];
						}
					}
				}


				$(".btn-add").click(function() {
					document.form1.name.value = ''
					$(".alert").hide()
					current = -1;
				})


				$(".form-pop").submit(function() {
					$(".alert").hide()
					var name = document.form1.name.value;
					var t = getDataByName(name);
					if (t && t.id != current) {
						$(".alert").show();
					} else {

						$.ajax({
							type: "post",
							url: `/api/expertmajors/md?action=${current<0 ? "add" : "edit"}`,
							contentType: "application/json",
							dataType: "json",
							data: JSON.stringify({
								id: current,
								name: name
							}),
							success: function(data) {
								console.log(data)
								$(".btn-close").click();
								loadAll();
							}
						});

					}
					return false;
				})


				$(".btn-delete-ok").click(function(){
					var t = getDataById(current);
					$.ajax({
						type: "post",
						url: `/api/expertmajors/md?action=delete`,
						contentType: "application/json",
						dataType: "json",
						data: JSON.stringify(t),
						success: function(data) {
							$(".btn-delete-cancel").click();
							loadAll();
						}
					});
				})
				
			})
		</script>
	</body>
</html>
